<!--排班管理-->
<template>
  <div class="pageContent">
    <div class="centerAll">
      <Table ref="xrTable" :list-api="list" :status-api="status" :table-column="tableColumn" :page-config="pageConfig"
        :table-config="tableConfig" @openViewForm="openViewForm" @openEditForm="openEditForm" :no-col="noCol">
        <template v-slot:copyBtn>
          <el-button type="primary" :loading="isLoadingCopy" @click="openCopyBtn()">复制上一周排班</el-button>
        </template>
        <template v-slot:batchBtn>
          <el-button type="primary" :loading="isLoadingBatc" @click="openCreateForm()">批量排班</el-button>
        </template>
        <template v-slot:exportBtn>
          <el-button type="primary" :loading="isLoadingExport" @click="openCreateForm()">导出</el-button>
        </template>
      </Table>
    </div>
  </div>

  <el-dialog v-model="dialogFormVisible" width="920px">
    <!-- <Form ref="xrForm" :table-column="tableColumn" :form-data="form" :is-read="isRead" /> -->
    <div class="Scheduling">
      <div class="schedulingTop">
        <el-form :inline="true" :model="schedulingDay" class="formALL" ref="queryFormRef">
          <el-form-item>
            <span class="title">排班设置</span>
            <el-input style="width: 180px;" v-model="schedulingDay.doctor_id" placeholder="请选择医生" clearable />
            <PickTime class="pickTime"></PickTime>
          </el-form-item>
        </el-form>
        <div class="tip">
          <div></div>指该日期“有被锁定的号源”
        </div>
      </div>
    </div>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="视频" name="video">
        <ContentPage1 :for-num="forNum1" :tabtype="1">
          <template v-slot:add>
            <el-button type="text" @click="addContent(1)">添加排班</el-button>
          </template>
          <template v-slot:reduce>
            <el-button type="text" @click="reduceContent(1)" class="close"><img src="/src/assets/close.png"
                alt=""></el-button>
          </template>
        </ContentPage1>
      </el-tab-pane>
      <el-tab-pane label="电话" name="phone">
        <ContentPage2 :for-num="forNum2" :tabtype="2">
          <template v-slot:add>
            <el-button type="text" @click="addContent(2)">添加排班</el-button>
          </template>
          <template v-slot:reduce>
            <el-button type="text" @click="reduceContent(2)" class="close"><img src="/src/assets/close.png"
                alt=""></el-button>
          </template>
        </ContentPage2>
      </el-tab-pane>
      <el-tab-pane label="图文" name="graphic">
        <ContentPage3 :for-num="forNum3" :tabtype="3">
          <template v-slot:add>
            <el-button type="text" @click="addContent(3)">添加排班</el-button>
          </template>
          <template v-slot:reduce>
            <el-button type="text" @click="reduceContent(3)" class="close"><img src="/src/assets/close.png"
                alt=""></el-button>
          </template>
        </ContentPage3>
      </el-tab-pane>
      <el-tab-pane label="特需问诊" name="special">
        <ContentPage4 :for-num="forNum4" :tabtype="4">
          <template v-slot:add>
            <el-button type="text" @click="addContent(4)">添加排班</el-button>
          </template>
          <template v-slot:reduce>
            <el-button type="text" @click="reduceContent(4)" class="close"><img src="/src/assets/close.png"
                alt=""></el-button>
          </template>
        </ContentPage4>
      </el-tab-pane>
      <el-tab-pane label="诊所视频" name="agent_video">
        <ContentPage5>
          <template v-slot:add>
            <el-button type="text" @click="addContent">添加排班</el-button>
          </template>
          <template v-slot:reduce>
            <el-button type="text" @click="reduceContent(1)">添加排班</el-button>
          </template>
        </ContentPage5>
      </el-tab-pane>
    </el-tabs>
    <template v-if="!isRead" #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm()">
          保存
        </el-button>
      </div>
    </template>
    <el-dialog v-model="innerVisible" width="500px" title="Inner Dialog" append-to-body>
      <span>This is the inner Dialog</span>
    </el-dialog>
  </el-dialog>
</template>

<script setup>
  import {
    tableColumn,
    pageConfig,
    tableConfig
  } from './config'
  import Table from '/src/components/TableComposite/index.vue'
  import PickTime from '../doctor_workforce/components/numberSource/pickTime.vue'
  import Form from '/src/components/Form/index.vue'
  import ContentPage1 from '../doctor_workforce/components/numberSource/index.vue'
  import ContentPage2 from '../doctor_workforce/components/numberSource/index.vue'
  import ContentPage3 from '../doctor_workforce/components/numberSource/index.vue'
  import ContentPage4 from '../doctor_workforce/components/numberSource/index.vue'
  import ContentPage5 from '../doctor_workforce/components/numberSource/video.vue'
  import {
    list,
    update,
    create
  } from '/src/api/baseInfo/mechanism'
  import {
    ref,
    nextTick,
    watch
  } from 'vue'
  import {
    ElMessageBox
  } from "element-plus";
  const dialogFormVisible = ref(false)
  const isRead = ref(false)
  const form = ref({})
  const xrForm = ref()
  const xrTable = ref()
  const isLoadingCopy = ref(false)
  const isLoadingBatc = ref(false)
  const isLoadingExport = ref(false)
  const schedulingDay = ref({})
  const activeName = ref('video')
  const noCol = ref(true)

  //添加排班的逻辑
  const forNum1 = ref(1)
  const forNum2 = ref(1)
  const forNum3 = ref(1)
  const forNum4 = ref(1)




  const openCreateForm = () => {
    isRead.value = false
    dialogFormVisible.value = true
    nextTick(() => {
      xrForm.value.ruleFormRef.resetFields()
    })
  }
  const openViewForm = (row) => {
    isRead.value = true
    dialogFormVisible.value = true
    form.value = {
      ...row
    }
    nextTick(() => {
      xrForm.value.ruleFormRef.clearValidate()
    })
  }
  const openEditForm = (row) => {
    isRead.value = false
    dialogFormVisible.value = true
    form.value = {
      ...row
    }
    nextTick(() => {
      xrForm.value.ruleFormRef.clearValidate()
    })
  }

  const submitForm = async () => {
    console.log(xrForm.value.ruleFormRef)
    if (!xrForm.value.ruleFormRef) return
    await xrForm.value.ruleFormRef.validate(async (valid, fields) => {
      if (valid) {
        if (form.value.id) {
          await update({
            ...form.value
          })
        } else {
          await create({
            ...form.value
          })
        }
        dialogFormVisible.value = false
        xrTable.value.resetFormParent()
      } else {
        console.log('error submit!', fields)
      }
    })
  }

  //复制上周排班
  const openCopyBtn = async () => {
    ElMessageBox.confirm(
        '确认复制上一周排班？',
        '确认提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
      .then(() => {
        //走接下的流程
      })
      .catch(() => {
        // ElMessage({
        //   type: 'info',
        //   message: 'Delete canceled',
        // })
      })
  }

  const handleClick = (e) => {
    console.log('e', e)
  }
  const addContent = (type) => {
    console.log('判读', type)
    if (type == 1) {
      forNum1.value++;
    } else if (type == 2) {
      forNum2.value++;
    } else if (type == 3) {
      forNum3.value++;
    } else if (type == 4) {
      forNum4.value++;
    }
  }
  const reduceContent = (type) => {
    console.log('判读', type)
    if (type == 1 && forNum1.value > 1) {
      forNum1.value--;
    } else if (type == 2 && forNum2.value > 1) {
      forNum2.value--;
    } else if (type == 3 && forNum3.value > 1) {
      forNum3.value--;
    } else if (type == 4 && forNum4.value > 41) {
      forNum4.value--;
    }
  }
</script>

<style lang="scss" scoped>
  ::v-deep .el-tabs__nav-wrap:after {
    background-color: transparent;
  }

  .Scheduling {
    .schedulingTop .title {
      margin-right: 16px;
      font-weight: 500;
      font-size: 16px;
    }


  }

  .cell {
    height: 30px;
    padding: 3px 0;
    box-sizing: border-box;
  }

  .cell .text {
    width: 24px;
    height: 24px;
    display: block;
    margin: 0 auto;
    line-height: 24px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
  }

  .cell.current .text {
    background: #626aef;
    color: #fff;
  }

  .cell .holiday {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #4d9b29;
    border-radius: 50%;
    top: 4px;
    right: 4px;
    transform: translateX(-50%);
  }

  .tip {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    font-size: 12px;
    color: #92989e;

    div {
      width: 8px;
      height: 8px;
      border-radius: 2px;
      background: #4d9b29;
      margin-right: 6px;
    }
  }

  .demo-tabs ::v-deep .el-button {
    width: 100%;
  }

  .close {

    display: flex;
    justify-content: flex-end;

    img {
      width: 16px;
      height: 16px;
    }
  }

  .pickTime {
    margin-left: 6px;
  }
</style>